<template>
  <div class="contentWrap">
        <p class="title">校园流量查询</p>
        <div class="swiperNews">
          <van-notice-bar class="van-news-bar"
            text="竹园区域用户结算日期为每月05号!         海棠区域用户结算日期为每月15号!    丁香区域用户结算日期为每月25号!"
          />
          <img src="../../assets/img/111.png" alt="#" class="notice">
        </div>
        <div class="user">
          <span>学号:</span>
          <input type="text" placeholder="请输入学生学号" v-model="username">
        </div>
        <div class="password">
          <span>密码:</span>
          <input type="password" placeholder="请输入密码" v-model="password">
        </div>
        <div class="captcha">
          <span>验证码:</span>
          <input type="text" placeholder="请输入图中验证码" v-model="captcha">
          <img  v-if="captcha_num" :src="captchaUrl" alt="验证码" @click="newCaptcha">
          <!-- <van-loading color="black" /> -->
        </div>
        <!-- <div class="login" @click="getGrade">查询成绩</div> -->
        <van-button class="login" :disabled="disabled" :loading="buttonLoading"  size="normal" type="primary" text="正在查询" @click="getFlow">查询流量</van-button>
        <div class="declare">
          <h3>补充说明:</h3>
          <p>本查询功能仅适用于西安电子科技大学在校师生使用，提供教学区、宿舍区及家属区的流量查询服务！</p>
        
          <p>流量查询网址：<a href="http://xxc.xidian.edu.cn">（http://xxc.xidian.edu.cn）</a></p>
          <!--
            校园无线常见问题:
             1．为什么无线连接成功打不开认证页面？1) 此无线使用设备以...
             上网账号流量融合步骤
             
              -->
        </div>
      </div>
</template>

<script>
import Vue from 'vue'
import Bus from "../../common/bus";
import store from "../../common/store";
import { Toast } from 'vant';
import { NoticeBar } from 'vant';

Vue.use(NoticeBar);

export default {
  data() {
    return {
      captcha_num: "",
      captcha_id: 0,
      captcha: "",
      username: "",
      password: "",
      showList: "",
      
      buttonLoading:false
    };
  },
  created() {
    this.$apis.getCaptcha1().then(res => {
      let { captcha_num, id } = res;
      this.captcha_num = captcha_num;
      this.captcha_id = id;
      console.log(res);
    });
    // this.$apis.getCaptchaPic(this.captcha_num).then(res =>{
    //   console.log(res)
    //   console.log(1)
    // })
  },
  computed: {
    captchaUrl() {
      return (
        "https://jsfz.meetingcn.org/static/captcha_zfw/" + this.captcha_num + ".png"
      );
    },
    disabled (){
      if(this.username && this.password && this.captcha){
        return false
      }else{
        return true
      }
    }
  },
  methods: {
    // gotoList (){
    //   console.log(1)
    //   this.$emit('toList',this.show)
    // },
    newCaptcha (){
      this.$apis.getCaptcha1().then(res => {
      let { captcha_num, id } = res;
      this.captcha_num = captcha_num;
      this.captcha_id = id;
    });
    },
    getFlow() {
      this.buttonLoading = true
      // if (this.captcha_num == this.captcha) {
      //   sign = true;
      // }
      console.log(this.captcha, this.captcha_id, this.username, this.password);
      this.$apis
        .getFlow({
          id: this.captcha_id,
          captcha: this.captcha,
          username: this.username,
          password: this.password
        },store.state.accesskey)
        .then( res => {
          if(res.result === "passwd_err" ){
            Toast('账户或密码有误~');
            this.buttonLoading = false
          }else if(res.result === "captcha_err" ){
            Toast('验证码有误~')
            this.buttonLoading = false
          }else{
            this.$router.push("/index/flowDetail/FlowList");
            this.buttonLoading = false
            // let { status, id } = res;
            // if (status === "true") {
            //   this.$store.commit("SAVE_USERINFO", {
            //     id: id
            //   });
            //   // 进入首页，再进行 系统状态栏颜色修改
            //   /* eslint-disable no-undef */
            //   try {
            //     plus.navigator.setStatusBarBackground("#498af7");
            //   } catch (error) {}
            //   this.buttonLoading = false;
            //   this.$router.replace("order");
            // } else {
            //   this.$dialog.alert({
            //     message: "账号或密码错误，请重新输入。"
            //   });
            // }
            console.log(res);
            store.commit('user_Flowlist', res); 
          }
      });
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../assets/less/baseDetail.less";

.contentWrap {
  margin: 0 auto;
  width: 100%;
  height: calc(~'100% - 66px');
  min-height: 500px;
}
.title {
  font-size: 20px;
  text-align: center;
  margin: 20px 0;
}
.user,
.password,
.captcha,
.login {
  width: 100%;
  height: 45px;
  line-height: 40px;
  border-bottom: 1px solid #eee;
}
.login {
  display: block;
  font-size: 18px;
  // background: rgb(57, 169, 237);
  line-height: 45px;
  text-align: center;
  color: white;
  width: 30%;
  margin: 30px auto;
  border-radius: 8px;
}
span {
  float: left;
  font-size: 16px;
  text-align: center;
  margin-left: 12%;
}
input {
  float: right;
  font-size: 16px;
  text-align: left;
  line-height: 38px;
  width: 60%;
  height: 42px;
  margin-right: 4%;
}
.captcha input {
  float: left;
  width: 128px;
  margin-left: 9%;
}
.captcha img {
  width: 74px;
  height: 32px;
  margin-top: 8px;
}
.van-loading {
  display: inline-block;
  vertical-align: middle;
}
.declare {
  position: static;
  margin-top: 30%;
  margin-left: 10%;
  // padding-bottom: 30px;
  width: 80%;
}
.declare h3 {
  font-size: 16px;
  line-height: 30px;
}
.declare p {
  text-indent: 1em;
  font-size: 12px;
  line-height: 20px;
}
.declare a {
  font-size: 12px;
  color: blue;
}

.scoreList {
  width: 100%;
  height: 40px;
  position: absolute;
  bottom: 30px;
  background: pink;
}


.swiperNews {
  position: relative;
}
.van-news-bar {
  margin-top: 3px;
  padding-left: 25px;
}
.notice {
  position: absolute;
  left: 0;
  top: 5px;
  width: 25px;
  height: 25px;
}
</style>
